//样式
const resolveStyle = () => { 
    const head = document.querySelector('head')
   
    if(head.querySelector('[carousel-card]')) {
      return
    } else {
      const styleCss = document.createElement('style') ; styleCss.setAttribute('carousel-card', true)
      styleCss.innerHTML = `
      .carousel-card {
        position: relative;
        transform-style: preserve-3d;
        min-height: 50vh;
        perspective: 1000px
      }
      .carousel-card > .carousel-card-item {
        position: absolute;
        width   : 35%;
        height  : calc(100% - 34vw);
        display : flex;
        justify-content : center;
        align-items : center;
        transition : .8s cubic-bezier(0.075, 0.82, 0.165, 1)
      }
      .carousel-card > .carousel-card-item.c-left {
        left: 0vw;
        z-index: 3;
        transform: rotateY(20deg) scale(.85);
        filter: blur(1.5px)
      }
      .carousel-card > .carousel-card-item.c-lefted {
        left: 60vw;
        z-index: 2;
        transform: rotateY(20deg) scale(.8);
        filter: blur(2px)
      }
      .carousel-card > .carousel-card-item.c-active {
        width: 46%;
        left: 50%;
        transform: translateX(-50%) translateZ(50px);
        z-index: 4
      }
      .carousel-card > .carousel-card-item.c-right {
        right: 0vw;
        z-index: 3; 
        transform: rotateY(-20deg) scale(.85);
        filter: blur(1.5px)
      }
      .carousel-card > .carousel-card-item.c-righted {
        right: 61vw;
        z-index: 2;
        transform: rotateY(-20deg) scale(.7);
        filter: blur(2px)
      }
      .carousel-card-item.c-more {
        width: 45%;
        left: 50%;
        transform: translateX(-50%)
      }
      .carousel-card ul {
        position: absolute;
        bottom: 25vw;
        left: 50%;
        padding: .05vw;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        transform: translateX(-50%) translateZ(60px)
      }
      .carousel-card ul > li {
        width: .7vw;
        height: .7vw;
        background: #ccc;
        border: solid .05vw white;
        border-radius: 50%;
        cursor: pointer;
        transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
      }
      .carousel-card ul > li.dot-active, .carousel-card ul > li:hover {
        width: .7vw;
        height: .7vw;
        border-radius: 50%;
        background: orange
      }`
      head.insertAdjacentElement('beforeend', styleCss)
    }
  }

  class CarouselCard { 
    constructor() {
      resolveStyle()
   
      this.cardItem = Array.from(document.querySelectorAll('.carousel-card>.carousel-card-item'))

      this.cardArray = ['c-lefted', 'c-left', 'c-active', 'c-right', 'c-righted',
        ...new Array(this.cardItem.length - 2).fill('c-more')
      ]
   
      this.init()
    }
    
    init() { 
      const length = this.cardArray.length
   
      this.cardItem.forEach((element, index) => { 
        element.classList.add(this.cardArray[index])
      })
   
      this.createDot()
   
      this.clickDot()
   
      this.clickImg()
    }
   
    onMove(orange = 'right') {  
      if (orange == 'left') {
        this.cardArray.push(this.cardArray.shift())
      } else { 
        this.cardArray.unshift(this.cardArray.pop())
      }
      this.checkedClass()
    }

    checkedClass() { 
      const length = this.cardArray.length
   
      this.cardItem.forEach((element, index) => { 
        const className = element.className.split(' ')[1]
   
        if (this.cardArray.findIndex(cless => cless == className) != -1) {
          element.classList.remove(className)
        }
        element.classList.add(this.cardArray[index])
      })
   
      checkedDot(this.cardArray.indexOf('c-active'))
    }
   

    createDot() { 
      const cardRoot = document.querySelector('.carousel-card')
      const dotTools = document.createElement('ul')
   
      dotTools.insertAdjacentHTML('beforeend', `
      ${ this.cardArray.map((className) => 
        `
          <li class="${ className == 'c-active' ? 'card-dot dot-active' : 'card-dot' }"></li>
        `).join('') }
      `)
      
      cardRoot.appendChild(dotTools)
    }

    clickDot() { 
      const mirroDot = Array.from(document.querySelectorAll('.card-dot'))
    
      mirroDot.forEach((dot, index) => {
        dot.onclick = () => {
          const beforeSteep = this.cardArray.indexOf('c-active'), length = this.cardArray.length
        if (index > beforeSteep) {
            const isSteep = index - beforeSteep 
            this.cardArray.unshift(...this.cardArray.splice(length - isSteep, length))
          } else { 
            const isSteep = beforeSteep - index 
            this.cardArray.push(...this.cardArray.splice(0, isSteep))
          }
   
          this.checkedClass()
   
          checkedDot(index)
        }
      })
    }

    clickImg() { 
      const imgs = Array.from(document.querySelectorAll('.carousel-card-item'))
      const dots = Array.from(document.querySelectorAll('.card-dot'))
   
      imgs.forEach((el, index) => el.onclick = () => { dots[index].click() })
    }
   

    // start(steep = 5000) { 
    //   setInterval(() => { this.onMove() }, steep)
    // }
    stop() { }
  }
   

  function checkedDot(index = 2) { 
    const mirroDot = Array.from(document.querySelectorAll('.card-dot'))

    mirroDot.forEach((dot) => { if (dot.classList.contains('dot-active')) { dot.classList.remove('dot-active') } })
   
    mirroDot[index].classList.add('dot-active')
  }
   
  const cd = new CarouselCard()
   
  cd.start()